<template>
  <!-- // 页面框架 -->
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/头像.jpg" alt="" />
        <span>电商后台管理系统</span>
      </div>
      <el-button ref="button" type="info" @click="exit">退出</el-button>
    </el-header>
    <!-- 主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="toggle" @click="toggle">|||</div>
        <el-menu
          background-color="#9e8141"
          text-color="#fff"
          unique-opened
          :collapse-transition="false"
          :collapse="isCollapse"
          :default-active="defult"
          router
          active-text-color="pink"
        >
          <el-submenu :index="item.id + ''" v-for="item in list" :key="item.id">
            <template slot="title">
              <i :class="item.iconclass"></i>
              <span>{{ item.authName }}</span>
            </template>
            <el-menu-item
              :index="'/' + children.path"
              v-for="children in item.children"
              :key="children.id"
              @click="saveMenu('/' + children.path)"
            >
              <template slot="title">
                <i :class="children.iconclass"></i>
                <span>{{ children.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 内容区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      // 保存从服务器获取的导航列表数据
      list: [],
      // 设置侧边栏动态宽度的布尔值
      isCollapse: false,
      // 本地存储的index高亮数据对象
      defult: ''
    }
  },
  name: 'app',
  methods: {
    toggle () {
      this.isCollapse = !this.isCollapse
    },
    async exit () {
      // 询问用户是否退出!
      const isOok = await this.$confirm('are u exit?').catch(() => {
        if (isOok === 'cancel') {
          return false
        }
        // 点击之后 销毁本地存储的token 并跳转至登录页面
      })
      if (isOok === 'confirm') {
        window.sessionStorage.clear()
        this.$router.push('/login')
      }
      if (isOok === 'cancel') return false
    },
    saveMenu (saveMenu) {
      // 点击当前导航项 就将当前的index值 保存到本地
      window.sessionStorage.setItem('defultMenu', saveMenu)
      // console.log(saveMenu)
      // 同时将index值保存到数据对象里
      this.defult = saveMenu
    }
  },
  // 页面加载完成后从服务器获取菜单数据
  async mounted () {
    // 1 异步请求
    const { data: res } = await this.$http.get('menus')
    if (res.meta.status !== 200) return this.$message(res.meta.msg)
    this.list = res.data
    // console.log(this.list)

    // 2 将本地存储的default-active 选中高亮的值给defult 这个时候将这个值动态赋给侧边栏就能实现导航项的固定高亮了
    this.defult = window.sessionStorage.getItem('defultMenu')
  }
}
</script>

<style scoped lang="less">
.home-container {
  height: 100%;
}
.el-header {
  background-color: #2c2833;
  display: flex;
  justify-content: space-between;
  padding-left: 6px;
  align-items: center;
  color: #fff;
  font-size: 25px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
  img {
    border-radius: 25px;
    width: 50px;
    height: 50px;
  }
}
.el-aside {
  background-color: #9e8141;
  height: 100%;
  .el-menu {
    border-right: 0;
  }
  .toggle {
      text-align: center;
      background-color: blue;
      height: 25px;
      letter-spacing: 0.2rem;
      cursor: pointer;
    }
}
.el-main {
  background-color: #fff;
}
</style>
